<template>
    <PageView :loading="requestLogStore.isPageLoading">
        <!-- 筛选数据的表单 -->
        <vxe-form ref="formRef"
            title-colon
            :rules="requestLogStore.formRules"
            :valid-config="{theme: 'normal'}">

            <!-- 开始日期 -->
            <vxe-form-item title="开始日期" field="startDateTime" :item-render="{}">
                <template #default>
                    <vxe-input v-model="requestLogStore.startDateTime"
                        placeholder="选择日期"
                        type="datetime" />
                </template>
            </vxe-form-item>

            <!-- 结束日期 -->
            <vxe-form-item title="结束日期" field="endDateTime" :item-render="{}">
                <template #default>
                    <vxe-input v-model="requestLogStore.endDateTime"
                        placeholder="选择日期"
                        type="datetime" />
                </template>
            </vxe-form-item>

            <!-- 查询按钮 -->
            <vxe-form-item :item-render="{}">
                <template #default>
                    <vxe-button icon="vxe-icon-search"
                        type="submit"
                        status="primary"
                        content="查询"
                        @click="requestLogStore.queryUserRequestLogList" />
                </template>
            </vxe-form-item>
        </vxe-form>

        <!-- 表格的工具栏 -->
        <vxe-toolbar ref="toolbarRef" custom />

        <!-- 表格 -->
        <vxe-table
            ref="tableRef"
            border
            stripe
            empty-text="暂无数据"
            min-height="300"
            :loading="requestLogStore.isTableLoading"
            :column-config="{resizable: true}"
            :row-config="{isHover: true}"
            :checkbox-config="{labelField: 'id', highlight: false, range: true}"
            :data="requestLogStore.tableDataList">
            <vxe-column field="requestTime" title="请求时间" min-width="100px" sortable />
            <vxe-column field="requestId" title="请求 ID" min-width="100px" show-overflow />
            <vxe-column field="method" title="Method" min-width="100px" show-overflow />
            <vxe-column field="url" title="Url" min-width="150px" show-overflow />
            <vxe-column field="params" title="Params" min-width="100px" show-overflow />
            <vxe-column field="body" title="Body" min-width="100px" show-overflow />
            <vxe-column title="操作" fixed="right" width="100px">
                <template #default="{row}">
                    <vxe-button mode="text" status="primary" @click="showDetail(row)">详细</vxe-button>
                </template>
            </vxe-column>
        </vxe-table>

        <!-- 分页导航栏 -->
        <vxe-pager
            style="margin-top: 10px"
            align="right"
            v-model:currentPage="requestLogStore.currentPage"
            v-model:pageSize="requestLogStore.currentPageSize"
            :total="requestLogStore.totalRow"
            @page-change="requestLogStore.queryUserRequestLogList">
        </vxe-pager>
    </PageView>
</template>
<script setup lang="ts">
import PageView from "@/views/layout/PageView.vue";
import {useRequestLogStore} from "@/store/UseRequestLogStore.ts";
import {onMounted, ref} from "vue";
import type {VxeTableInstance, VxeToolbarInstance} from 'vxe-table'
import {UserRequestLogVO} from "@/entiy/vo/UserRequestLogVO.ts";
import MessageUtils from "@/utils/MessageUtils.ts";

const requestLogStore = useRequestLogStore();
const toolbarRef = ref<VxeToolbarInstance>();
const tableRef = ref<VxeTableInstance>();

onMounted(() => {
    // 如果使用内置功能，需要先关联表格，通过调用 connect() 方法与表格进行关联，就可以开启相关的功能
    const $table = tableRef.value
    const $toolbar = toolbarRef.value
    if ($table && $toolbar) {
        $table.connect($toolbar)
    }

    // 初始加载数据
    requestLogStore.queryUserRequestLogList().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message)
    })
})

const showDetail = (row: UserRequestLogVO) => {
    console.log("ShowDetail:", row);
}
</script>
